<template>
<el-dialog v-model="dialogVisible" title="导入号码" width="500" :before-close="changeDialogVisible">
  <el-form
    ref="formEl"
    style="max-width: 600px"
    :model="formData"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="分组" prop="groupId" :rules="[{required: true, message: '请输入批次', trigger: 'blur'}]">
      <div class="flex" style="width: 100%;">
        <el-select v-model="formData.groupId" placeholder="请选择" :clearable="true" filterable>
          <el-option v-for="item, index in groupList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button @click="createGroup" style="margin-left: 10px;">创建分组</el-button>
      </div>
    </el-form-item>
    <el-form-item label="国家" prop="country" v-if="false">
      <el-select v-model="formData.country" placeholder="请选择" :clearable="true" filterable>
        <el-option v-for="item in countriesList" :key="item.code" :label="item.name" :value="item.code">
          <span class="flag-icon" :class="`flag-icon-${item.code.toLowerCase()}`"></span>
          <span style="margin-left: 5px;">{{ item.name }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="文件导入" prop="file" :rules="[{required: true, message: '请上传文件', trigger: 'change'}]">
      <el-upload
        class="upload-demo"
        :auto-upload="false"
        :limit="1"
        action=""
        :on-change="handleFileChange"
      >
        <el-button type="primary">选择文件</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="changeDialogVisible(false)">取消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">
        确定
      </el-button>
    </div>
  </template>
</el-dialog>
<AddGroupForm ref="addGroupFormRef" @refresh="getGroupListData" />
</template>


<script setup>
import AddGroupForm from '../grouping/form.vue'
import { getData as getGroupList } from "@/api/equipmentManagement/numberManage/grouping.api";
import { addRow } from "@/api/equipmentManagement/numberManage/importNum.api";
import { fileInfoUpload } from '@/utils/formRequest'
import useToggle from "@/hooks/useToggle";
import useCountries from "@/hooks/useCountries";
const { countriesList, getCountryName } = useCountries()
const [loading, _, setLoading] = useToggle();
const [dialogVisible, changeDialogVisible, setDialogVisible] = useToggle();

const emit = defineEmits(["refresh"]);

const formData = ref({
  apps: "VIBER",
  method: "mobile",
  groupId: void undefined,
  file: void undefined,
})

const formEl = ref(null);
const submit = async () => {
  await formEl.value.validate((valid, fields) => {
    if (valid) {
      setLoading(true);
      const fileData = new FormData()
      fileData.append('file', formData.value.file.raw)
      fileInfoUpload('/sms/api/import?apps=VIBER&method=mobile&groupId=' + formData.value.groupId, fileData).then(res => {
        if(res.status) {
          ElMessage.success('导入成功')
          setLoading(false);
          changeDialogVisible()
          emit("refresh");
        }
      }).finally(() => {
        setLoading(false);
        setDialogVisible(false)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
  
};

const handleOpen = (row) => {
  setDialogVisible(true);
  nextTick(() => {
    resetForm(formEl.value);
    row.id && (formData.value = { ...row, app: "VIBER" })
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

const handleFileChange = (e) => {
  formData.value.file = e
}

const groupList = ref([]);
const getGroupListData = async() => {
  const res = await getGroupList({ app: 'VIBER', method: 'mobile', page: 1, size: 1000 })
  groupList.value = res.rows;
}
getGroupListData()

const addGroupFormRef = ref(null)
const createGroup = () => {
  addGroupFormRef.value.handleOpen({})
}

defineExpose({
  handleOpen,
})
</script>
